<template>
    <div class="user-profile">
        <!-- 导航栏 -->
        <van-nav-bar
            title="个人信息"
            left-arrow
            @click-left="$router.back()"
            class="app-nav-bar"
        />
        <!-- /导航栏 -->
        <input 
            type="file" 
            accept="image/*" 
            hidden ref="file"
            @change="onFileChange"
        >
        <!-- 用户信息 -->
        <van-cell title="头像" center is-link @click="$refs.file.click()">
            <van-image
                width="30"
                height="30"
                fit="cover"
                round
                :src="user.photo"
            />
        </van-cell>
        <van-cell title="昵称" is-link :value="user.name" @click="show = true"></van-cell>
        <van-cell title="性别" is-link :value="user.gender === 1 ? '男' : '女'" @click="isSexShow = true"></van-cell>
        <van-cell title="生日" is-link :value="user.birthday" @click="isShow = true"></van-cell>
        <!-- /用户信息 -->

        <!-- 弹出框 -->
        <van-popup 
            v-model="show" 
            position="bottom" 
            :style="{ height: '100%' }" 
        >
            <updateName
                v-if="show" 
                :name1="user.name"
                @close="show = false"
            />
        </van-popup>
        <!-- /弹出框 -->

        <!-- 弹出框 -->
        <van-popup 
            v-model="isSexShow" 
            position="bottom"  
        >
            <updateGender 
                @close="isSexShow = false"
                v-model="user.gender"
            />
        </van-popup>
        <!-- /弹出框 -->
        <!-- 弹出框 -->
        <van-popup 
            v-model="isShow" 
            position="bottom"  
        >   
        
            <updateBirthday 
                @close="isShow = false"
            />
        </van-popup>
        <!-- /弹出框 -->
        <!-- 弹出框 -->
        <van-popup 
            v-model="isPhShow" 
            position="bottom"  
        >   
        
            <update-photo
                @close="isPhShow = false"
                :style="{ height: '100%' }" 
                :image="previewImage"
            />
        </van-popup>
        <!-- /弹出框 -->
    </div>
</template>
<script>
import { getUserprofile } from '@/api/user'
import updateName from './component/update-name.vue'
import updateGender from './component/update-gender.vue'
import updateBirthday from './component/update-birthday'
import UpdatePhoto from './component/update-photo.vue'
export default {
    data() {
        return {
            user:{},
            show:false,
            isSexShow:false,
            isShow:false,
            isPhShow:true,
            previewImage:null
        }
    },
    methods: {
        async loadUserProfile(){
            const { data } = await getUserprofile()
            this.user = data.data
            //console.log(data)
        },
        onFileChange(){
            this.isPhShow = true
            this.$refs.file.value = ''
            const blob = window.URL.createObjectURL(this.$refs.file.files[0])
            this.previewImage = blob
        }
    },
    created() {
        this.loadUserProfile()
    },
    components:{
        updateName,
        updateGender,
        updateBirthday,
        UpdatePhoto
    }
}
</script>
<style lang="less" scoped>
.van-popup{
    background: #f5f7f9;
}
</style>